@charset "utf-8";
/** Copyright 2020
  * @时间: 2020/10/3
  * @作者: 臧锡洋(Seale)
  * @blog: https://www.imsle.com
  * 复用css请注明作者
*/

/*********************************header style**********************************/
.end-base-header{
    background: var(--end-theme-bg-color-default);
}
.header-content{
    font-size: 1.8rem;
    color: var(--end-theme-text-header-color-default);
    background: url("../image/flower_header.png");
    height: 99px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
.header-content .header-left{
    margin-left: 271px;
}
.header-content .header-left a,.header-content .header-right a{
    position: relative;
    height: 99px;
    box-sizing: border-box;
    padding: 0 24.5px;
    font-weight: 500;
    border-bottom: 4px solid transparent;
    transition: .2s ease;
    -webkit-transition: .2s ease;
}
.header-content .header-left a.nav:hover,.header-content .header-right a.nav:hover{
    border-bottom: 4px solid transparent !important;
}
.header-content .header-left a:hover,.header-content .header-right a:hover{
    border-bottom: 4px solid var(--end-theme-text-header-bg-color-actiive);
    transition: .3s ease-in-out;
    -webkit-transition: .3s ease-in-out;
}
.header-content .header-left a.active,.header-content .header-right a.active{
    background: var(--end-theme-text-header-bg-color-actiive);
    color: var(--end-theme-text-header-color-active);
}
.header-content .header-left a.nav:hover>.nav-content,.header-content .header-right a.nav:hover>.nav-content{
    visibility: visible;
    opacity: 1;
    transform: perspective(600px) rotateX(0);
    -webkit-transform: perspective(600px) rotateX(0);
    transition: opacity .3s,transform .3s,visibility .3s;
    -webkit-transition:  opacity .3s,transform .3s,visibility .3s;
}
.header-content .header-left a>.nav-content,.header-content .header-right a>.nav-content{
    visibility: hidden;
    opacity: 0;
    position: absolute;
    width: 100%;
    left: 0;
    top: 99px;
    z-index: 999;
    background: var(--end-theme-header-nav-background-color);
    color: var(--end-theme-header-nav-text-color);
    transform: perspective(600px) rotateX(-50deg);
    -webkit-transform: perspective(600px) rotateX(-50deg);
    transition: opacity .3s,transform .3s,visibility .3s;
    -webkit-transition: opacity .3s,transform .3s,visibility .3s;
}
.nav-content>.nav-item{
    height: 33px;
    font-size: 1.6rem;
    transition: .2s ease-in-out;
    -webkit-transition: .2s ease-in-out;
}
.nav-content>.nav-item:hover{
    background: var(--end-theme-header-nav-hover-background-color);
    color: var(--end-theme-header-nav-text-hover-color);
    transition: .2s ease-in-out;
    -webkit-transition: .2s ease-in-out;
}
.header-content .header-center-logo{
    padding: 5px 20px;
}
.header-content .header-right{
    margin-right: 192px;
}
/*********************************banner style**********************************/

.end-base-banner{
    background: var(--end-theme-banner-default-background-color);
    height: 650px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
.end-carousel{
    position: relative;
    overflow: hidden;
}
.end-carousel .content > .end-carousel-item{
    position: absolute;
    height: 650px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    transition:all .3s ease-in-out;
}
.end-carousel .content{
    position: relative;
    height: 650px;
    overflow: hidden;
}
.end-carousel .left-container,.right-container{
    position: absolute;
    height: 100%;
}
.left-container{
    left: 0;
}
.right-container{
    right: 0;
}
.left-container .left-arrow{
    background: url("../image/left_arrow.png") no-repeat;
    width: 56px;
    height: 101px;
    z-index: 999;
}
.right-container .right-arrow{
    background: url("../image/right_arrow.png") no-repeat;
    width: 56px;
    height: 101px;
    z-index: 999;
}
/**************************************footer**************************************/
.end-base-footer{
    background: var(--end-theme-bg-color-default);
    color: var(--end-theme-text-footer-color);

}
.footer-container{
    padding: 30px 196px;
    height: 120px;
    background: url("../image/flower_footer.png") no-repeat;
    box-sizing: border-box;
}
.footer-container .logo-center{
    flex: 2 0 auto;
    padding-left: 104px;
}
.logo-footer > img{
    height: 60px;
}
.footer-container .left-info {
    margin-left: 30px;
    line-height: 23px;
}

    /*************************************mid**********************************************/
.mid-container {
    font-size: 13px;
}

